<template>
  <div class="inter">
    <loading v-bind:state="loading"></loading>
    <div v-infinite-scroll="loadMore"
         infinite-scroll-disabled="false"
         infinite-scroll-distance="1"
         infinite-scroll-immediate-check="true"
    >
      <item-order-sec
        :index="index"
        @onItemCLick="onItemCLick"
        v-for="(item , index) in interData"
        :item-obj="item"
        :key="index"
        :orderType="orderType"
      ></item-order-sec>
      <listload :stateLoad="loadLast"></listload>
      <list-no-more :LastData="LastData"></list-no-more>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import ListNoMore from '@/components/common/ListNoMore';
  import ItemOrderSec from '@//components/common/ItemOrderSec';

  export default {
    name: `inteorderlist`,
    components: {ItemOrderSec, ListNoMore},
    data() {
      return {
        loading: true, // 全局遮罩动画
        loadLast: false, // 底部遮罩动画
        LoadData: true, // 是否应该调用获取数据方法
        LastData: false, // 数据是否加载完没有了
        page: 0, // 页数
        interData: [],
        demoDate: false,
        orderType: 'integral'
      };
    },
    created() {
      this.loadMore();
    },
    methods: {
      loadMore(type) {
        // 获取数据和上拉加载共用方法
        console.log('你好啊啊', this.page);
        if (this.LoadData === true) {
          // 封掉查询数据接口
          this.LoadData = false;
          // 上拉加载更多
          this.loadLast = true;
          this.$Spread.getInterOrderList({type: 'integral', status: 'all', page: this.page}).then(res => {
            this.page++;
            // 去掉初始遮罩
            this.loading = false;
            // 组装数据
            if (res.status === 'ok') {
              if (res.list.length > 0) {
                res.list.map((item, index) => {
                  this.interData.push(item);
                });
              }
            }
            console.log('this.interData1', this.interData);
            // 对返回数据的数量进行判断，如果小于每页规定的就不要再请求了
            let DataNum = res.list.length;
            if (DataNum < 10) {
              this.LoadData = false;
              this.loadLast = false;
              this.LastData = true;
              return;
            }
            console.log(DataNum);
            // 查看本地组装后的数据
            console.log('this.interData2', this.interData);
            // 去掉上拉加载动画
            this.loadLast = false;
            //  打开查询数据接口
            this.LoadData = true;
          }, () => {
            this.loading = false;
          });
        }
      },
      onItemCLick(index) {
        // 积分订单详情路由
        this.$router.push({
          name: 'menorderdetail',
          query: {id: this.interData[index].id, status: this.interData[index].status}
        });
      }
    }
  };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../assets/stylus/main.styl"
</style>
